@keyframes :global(breathe-logo)
  0%
    filter: drop-shadow(0px 0px 20px rgba(255,255,255,0.75))

  25%
    filter: drop-shadow(0px 0px 20px rgba(255,255,255,0.6))

  35%
    filter: drop-shadow(0px 0px 20px rgba(255,255,255,0.4))

  50%
    filter: drop-shadow(0px 0px 20px rgba(255,255,255,0.6))

  75%
    filter: drop-shadow(0px 0px 20px rgba(255,255,255,0.4))

  85%
    filter: drop-shadow(0px 0px 20px rgba(255,255,255,0.6))

  100%
    filter: drop-shadow(0px 0px 20px rgba(255,255,255,0.75))


.loading
  width: 100vw
  height: 100vh

  display: flex
  flex-direction: column

  justify-content: center
  align-content: center
  align-items: center

  text-align: center

  font-size: calc(1em + 1vw)

  user-select: none
  -webkit-user-drag: none


.loading_text
  font-size: 2rem

  font-weight: lighter
  user-select: none
  -webkit-user-drag: none

  opacity: 0.2


.loading_logo
  width: 25%
  height: auto
  user-select: none
  -webkit-user-drag: none

  filter: drop-shadow(0px 0px 20px rgba(255,255,255,0.75))

  opacity: 0.8

  stroke: black
  stroke-width: 10px
  stroke-opacity: 50%

  &:global
    animation: ease 3s forwards infinite running breathe-logo

